<template>
	<div class="menus">
		<el-table
		    :data="tree_menu"
		    style="width: 100%" border>
		    <el-table-column
		      label="模块查看" width="200">
			  <template slot-scope="props">
			  		<div><el-checkbox @change="allChange(props.row)" :value="props.row.isChecked" :label="props.row.menu_name"></el-checkbox></div>
			  </template>
		    </el-table-column>
			<el-table-column
			  label="子菜单查看" width="200">
			  <template slot-scope="props">
					<div v-if="props.row.children" v-for="(val,index) in props.row.children">
						<div :class="['children-item',{'tabborder-bottom':index!=props.row.children.length-1}]">
							<el-checkbox @change="changeTwo(props.row,val)" :value="val.isChecked" :label="val.menu_name">
							</el-checkbox>
						</div>
					</div>
					<!-- <div v-if="!props.row.children"><div class="children-item text-999">暂无子类</div></div> -->
			  </template>
			</el-table-column>
			<el-table-column fixed="right" label="操作按钮">
				<template slot-scope="props">
					<div v-if="props.row.children" v-for="(val,index) in props.row.children">
						<div v-if="val.children" class="children-item tabborder-bottom">
							<el-checkbox v-for="(v,key) in val.children" @change="changeThree(props.row,val,v)" :value="v.isChecked" :label="v.menu_name">
							</el-checkbox>
						</div>
						<div v-if="!val.children" class="children-item tabborder-bottom">&nbsp;</div>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		name: 'items',
		props: {
			tree_menu: Array,
			name: String,
			disabled: Boolean
		},
		data() {
			return {
				three: [],
				checkAll: false,
				isIndeterminate: false
			}
		},
		methods: {
			//全选/反选
			allChange(item) {
				item.isChecked = !item.isChecked
				if (item.children) {
					this.defaultTree(item)
				}
			},
			//二级选择
			changeTwo(item, val) {
				val.isChecked = !val.isChecked
				item.isChecked = this.chooseTrue(item.children)
				if(val.isChecked){
					item.isChecked=true
				}else{
					if(val.children){
						val.children.forEach(v => {
							v.isChecked=false
						})
					}
					
				}
			},
			//三级选择
			changeThree(item, val, v) {
				v.isChecked = !v.isChecked
				if(v.isChecked){
					item.isChecked = v.isChecked
					val.isChecked = v.isChecked
				}
				
			},
			chooseTrue(item){
				let isTrue
				item.forEach(val=>{
					if(val.isChecked){
						isTrue=true
					}
				})
				return isTrue
			},
			//全选/反选
			defaultTree(items) {
				items.children.forEach(item => {
					item.isChecked = items.isChecked
					if (item.children) {
						this.defaultTree(item)
					}
				})
			}
		}
	}
</script>
<style lang="less">
	.menus {
		.el-col {
			line-height: 40px;
		}
	}
	.children-item{
		display: flex;
		height: 36px;
		line-height: 36px;
		padding-left: 10px;
		margin-left: -10px;
	}
	.el-checkbox__label {
		font-size: 15px !important;
	}

	.el-checkbox,
	.el-checkbox__input.is-checked+.el-checkbox__label {
		font-size: 15px !important;
	}

	.el-checkbox__inner {
		border-color: #606266;
	}

	.el-checkbox__inner,
	.el-checkbox__input.is-disabled.is-checked {
		width: 18px;
		height: 18px;
		
	}
	// .el-checkbox__input.is-checked + .el-checkbox__label{
	// 	color: #ff9644!important;
	// }
	// .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
	// 	background-color: #ff9644!important;
	// 	border-color: #ff9644!important;
	// }
	
	.el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
		top: 7px !important;
	}

	.el-checkbox__inner::after,
	.el-checkbox__inner::after {
		height: 8px !important;
		left: 6px !important;
		top: 2px !important;
		width: 4px !important;
	}
</style>
